<template>
  <div>
      <Card>
     <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="100">
       <FormItem label="原密码" prop="oldpwd">
         <Input v-model="formValidate.oldpwd" type="password" placeholder="请输入原密码"></Input>
       </FormItem>
       <FormItem label="新密码" prop="password">
         <Input v-model="formValidate.password" type="password" placeholder="请输入新密码"></Input>
       </FormItem>
       <FormItem label="新确认新密码" prop="cpassword">
         <Input v-model="formValidate.cpassword" type="password" placeholder="请输入新确认新密码"></Input>
       </FormItem>

       <FormItem label=" ">
           <Button type="warning" @click="editPwd('formValidate')" :disabled="isDisable" :loading="isLoading">保存</Button>
       </FormItem>
     </Form>
      </Card>
  </div>
</template>
<!-- 公共弹框，成功，失败，报错，loading -->
<script>
  import {
    mapState
  } from 'vuex'
  import {
    permission
  } from '@/config/permission.js'

  // 接口
  import {
    editPwd,

  } from '@/api/setting-group/manager'

  export default {
    name: 'tables_page',
    components: {

    },
    created() {
      let _this = this
      this.$nextTick(function() {
        // _this.role_view = permission(this.roles, 'order/detail')// 查看权限
      })

    },
    watch: {

    },
    mounted() {

    },
    computed: {
      ...mapState({

      }),

    },
    data() {
      let _this = this;
      var validatePwd = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'));
        } else {
          if (_this.formValidate.password !== '') {
            _this.$refs.formValidate.validateField('cpassword'); //formValidate,ref
          }
          callback();
        }
      };
      var validateRepwd = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if (value !== _this.formValidate.password) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      };
      return {

        data: {

        },
        formValidate: {
         oldpwd:'',
         password: '',
         cpassword:'',

        },
        isDisable: false, // 新增时提交按钮点击状态
        isLoading: false, // 新增时提交按钮loading状态

        ruleValidate: {

         password: [{
           required: true,
           message: '请输入新密码',
           trigger: 'blur'
         }, {
           validator: validatePwd,
           trigger: 'blur'
         }],
         cpassword: [{
           required: true,
           message: '请输入新确认密码',
           trigger: 'blur'
         }, {
           validator: validateRepwd,
           trigger: 'blur'
         }],
         oldpwd: [{
           required: true,
           message: '请输入原密码',
           trigger: 'blur'
         } ],
        },

      }
    },
    methods: {
      // 修改密码
      editPwd(name) {
        let _this = this

        this.$refs[name].validate((valid) => {
          if (valid) {

              // 新增
              let obj = {
                 oldpwd:_this.formValidate.oldpwd,
                 password:_this.formValidate.password,
                 cpassword:_this.formValidate.cpassword
              }

              editPwd(obj).then(res => {
                if (res.data.status == 1) {
                  _this.formValidate = {}
                    _this.handleReset('formValidate') // 验证重置
                  _this.$Message.success('操作成功')
                } else {

                  // axios响应拦截
                }
              }).catch(function(error) {
                // 异常

                console.log(error)
              })


          } else {
            this.$Message.error('请输入必填项!')
          }
        })


      },
      handleReset(name) {
        this.$refs[name].resetFields()
      },
    }

  }
</script>

<style lang="scss">
  @import "./index";
</style>
